<!doctype html>
<html lang="zxx">
<html xmlns:th="http://www.thymeleaf.org">
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="/css/bootstrap.min.css">

    <link rel="stylesheet" href="/css/owl.theme.default.min.css">

    <link rel="stylesheet" href="/css/owl.carousel.min.css">

    <link rel="stylesheet" href="/css/remixicon.css">

    <link rel="stylesheet" href="/css/meanmenu.min.css">

    <link rel="stylesheet" href="/css/animate.min.css">

    <link rel="stylesheet" href="/css/style.css">

    <link rel="stylesheet" href="/css/responsive.css">

    <link rel="stylesheet" href="/layui/css/layui.css">


    <title>结算页面</title>
    <style>

        .navbar-category-dropdown {
            display: none; /* 默认隐藏 */
            position: absolute; /* 绝对定位脱离文档流 */
            z-index: 1000; /* 确保悬浮层在最上层 */
            background: #fff; /* 背景色防止透明 */
            box-shadow: 0 3px 6px rgba(0,0,0,0.1); /* 添加阴影增强层次感 */
            min-width: 200px; /* 设置最小宽度避免内容挤压 */
        }

        .navbar-category:hover .navbar-category-dropdown {
            display: block; /* 鼠标悬停父容器时显示下拉层 */
        }

        .navbar-category-dropdown {
            opacity: 0;
            transition: opacity 0.3s ease;
            top: 100%; /* 下拉层紧贴父容器底部 */
        }
        .navbar-category:hover .navbar-category-dropdown {
            opacity: 1;
        }
    </style>
</head>
<body>
<input  type="hidden" id="userId" th:value="${session.USER_LOGIN.id}"/>
<div class="preloader">
    <div class="content">
        <div class="box"></div>
    </div>
</div>


<header class="header-area">
    <div class="top-header">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-8">
                    <ul class="header-left-content">
                        <li>
                            <a href="about.html">
                                关于我们
                            </a>
                        </li>
                        <li>
                            <a href="store-location.html">
                                店铺地址
                            </a>
                        </li>
                        <li>
                            需要帮助? Call:
                            <a href="tel:+1-(514)-321-4567">
                                <span>+1 (514) 321-4567</span>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="col-lg-4">
                    <div class="header-right-content">
                        <ul>
                            <li>
                                <a href="/page/mycount">登录账号</a>
                            </li>
                            <li>
                                <a href="/page/dashboard">个人信息</a>
                            </li>
                            <li>
                                <div class="navbar-option-item navbar-option-language dropdown language-option">
                                    <button class="dropdown-toggle" type="button" id="language2"
                                            data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        <span class="lang-name">English</span>
                                    </button>
                                    <div class="dropdown-menu language-dropdown-menu" aria-labelledby="language2">
                                        <a class="dropdown-item" href="#">
                                            <img src="/picture/english.png" alt="Image">
                                            English
                                        </a>
                                        <a class="dropdown-item" href="#">
                                            <img src="/picture/deutsch.png" alt="Image">
                                            Deutsch
                                        </a>
                                        <a class="dropdown-item" href="#">
                                            <img src="/picture/china.png" alt="Image">
                                            简体中文
                                        </a>
                                        <a class="dropdown-item" href="#">
                                            <img src="/picture/arbic.png" alt="Image">
                                            العربيّة
                                        </a>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="middle-header">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-3">
                    <div class="logo">
                        <a href="">
                            <img src="/picture/logo.png" alt="Image">
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="navbar-area only-home-one-sticky">
        <div class="mobile-responsive-nav">
            <div class="container">
                <div class="mobile-responsive-menu">
                    <!--  导航侧边栏  -->
                    <div class="logo">
                        <a href="">
                            <img src="/picture/logo.png" alt="logo">
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="desktop-nav">
            <div class="container">
                <nav class="navbar navbar-expand-md navbar-light">
                    <div class="navbar-category">
                        <button type="button">
                            <i class="ri-menu-line"></i>
                            全部分类
                            <i class="arrow-down ri-arrow-down-s-line"></i>
                        </button>
                        <div class="navbar-category-dropdown">
                            <ul id="categorylist">
                            </ul>
                        </div>
                    </div>
                    <div class="collapse navbar-collapse mean-menu" id="navbarSupportedContent">
                        <ul class="navbar-nav">
                            <li class="nav-item float-end">
                                <a href="/page/index" class="nav-link active">
                                    首页
                                </a>
                            </li>
                            <li class="nav-item mega-menu">
                                <a href="/page/products" class="nav-link">
                                    全部商品
                                </a>
                            </li>
                            <li class="nav-item">
                                <a href="/page/dashboard" class="nav-link">
                                    个人信息管理
                                </a>
                            </li>
                            <li class="nav-item">
                                <a href="/page/cart" class="nav-link">
                                    我的购物车
                                </a>
                            </li>
                        </ul>
                    </div>
                </nav>
            </div>
        </div>
    </div>
</header>

<div class="page-title-area">
    <div class="container">
        <div class="page-title-content">
            <ul>
                <li>
                    <a href="/page/index">
                        首页
                    </a>
                </li>
                <li class="active">结算</li>
            </ul>
        </div>
    </div>
</div>

    <div class="col-lg-8" style="padding-left: 460px" >
        <div class="address-list" id="addresslist">
            <h3>收货地址</h3>
            <div class="added-address">
                <a href="/page/addaddress">
                    <i class="ri-add-line"></i>
                    <span>添加收货地址</span>
                </a>
            </div>

        </div>
    </div>
    <div class="order-details ml-15" >
        <div class="cart-totals mb-0">
            <section class="cart-area ptb-54">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-9">
                            <form class="cart-controller">
                                <div class="cart-table table-responsive">
                                    <table class="table table-bordered">
                                        <thead>
                                        <tr>
                                            <th scope="col">商品图</th>
                                            <th scope="col">商品名</th>
                                            <th scope="col">价格</th>
                                            <th scope="col">数量</th>
                                            <th scope="col">总价</th>
                                        </tr>
                                        </thead>
                                        <tbody id="productlist">
                                        </tbody>
                                    </table>
                                </div>
                            </form>
                        </div>
                        <div class="col-lg-3">
                            <div class="cart-totals">
                                <h3 class="cart-checkout-title">合计</h3>
                                <ul>
                                    <li>总价 <span type="sum">0</span></li>
                                </ul>
                                <a class="default-btn" type="checkoutcart">
                                    确认下单
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>

<section class="subscribe-area pt-54 pb-30">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-2">
                <div class="logo">
                    <a href="/page/index">
                        <img src="/picture/white-logo.png" alt="Image">
                    </a>
                </div>
            </div>
            <div class="col-lg-5">
                <div class="subscribe-content">
                    <span>全部商品三折处理</span>
                    <h3>七天无理由退货,保障您的权益</h3>
                    <p>全场货物免费送运费险,让您退货无忧</p>
                </div>
            </div>
        </div>
    </div>
</section>

<div class="copy-right-area">
    <div class="container">
        <p>Copyright &copy; 2021.Company name All rights reserved.<a target="_blank" href="https://www.downdemo.com">&#x7F51;&#x9875;&#x6A21;&#x677F;</a>
        </p>
    </div>
</div>


<div class="go-top">
    <i class="ri-arrow-up-s-fill"></i>
    <i class="ri-arrow-up-s-fill"></i>
</div>


<script src="/js/jquery.min.js"></script>

<script src="/js/bootstrap.bundle.min.js"></script>

<script src="/js/meanmenu.min.js"></script>

<script src="/js/owl.carousel.min.js"></script>

<script src="/js/wow.min.js"></script>

<script src="/js/range-slider.min.js"></script>

<script src="/js/form-validator.min.js"></script>

<script src="/js/contact-form-script.js"></script>

<script src="/js/ajaxchimp.min.js"></script>

<script src="/js/custom.js"></script>

<script src="/layui/layui.all.js"></script>
<!--地址选择-->
<script type="text/html" id="addressitem">
    <div class="billing-address-bar mb-0" type="additem">
        <div class="row align-items-center">
            <div class="col-lg-4 col-md-6">
                <h3>收货地址</h3>
                <ul>
                    <li>
                        <span>名字:</span>
                        <a type="name">名字</a>
                    </li>
                    <li>
                        <span>地址:</span>
                        <a type="address">地址</a>
                    </li>
                </ul>
            </div>
            <div class="col-lg-4 col-md-6">
                <ul>
                    <li>
                        <span>电话:</span>
                        <a type="telephone">电话</a>
                    </li>
                </ul>
            </div>
            <div class="col-lg-4 col-md-6">
                <div class="edit-address">
                    <a href="" class="default-btn" name="editadd">编辑地址</a>
                    <input type="hidden" value="" name="addid">
                    <button class="default-btn m-0">
                        删除
                    </button>
                </div>
            </div>
            <h4>选择</h4>
            <div class="form-check">
                <input class="form-check-input" type="radio" name="addresschoose" value="">
            </div>
        </div>
    </div>
</script>
<!--商品-->
<script id="cartitem" type="text/html">
    <tr type="singleproduct">
        <td class="product-thumbnail">
            <a href="product-details.html">
                <img src="" alt="Image" type="productimg"/>
            </a>
        </td>
        <td class="product-name">
            <a href="product-details.html" type="productname">商品名 </a>
        </td>
        <td class="product-price">
            <span class="unit-amount" type="productprice">商品价格</span>
        </td>
        <td class="product-quantity">
            <div class="input-counter" type="">
                <span class="minus-btn">
                    <i class="ri-subtract-line"></i>
                </span>
                <input type="text" id="productnumber" value="">
                <span class="plus-btn" type="">
                    <i class="ri-add-line"></i>
                </span>
            </div>
        </td>
        <td class="product-subtotal">
            <span class="subtotal-amount" type="singlesumprice">总价</span>
        </td>
    </tr>
</script>
<!--侧边导航栏-->
<script type="text/html" id="categoryitem">
    <li style="text-align: center">
        <a href="#">{{name}}</a>
    </li>
</script>
<script th:inline="javascript">
    const layer = layui.layer;
    const userID= parseInt($('#userId').val(),10)
    //加载地址
    $.ajax({
        url:'/address/getaddressbyuseridall',
        data:{userid:userID},
        success:function(result){
            for(let i=0;i<result.length;i++){
                let item=$("#addressitem").text();
                const $item=$(item);
                $item.find('[type=name]').text(result[i].name);
                $item.find('[name=editadd]').attr('href','http://localhost:8080/page/putaddid?id='+result[i].id);
                $item.find('[type=address]').text(result[i].province+result[i].city+result[i].area+result[i].address);
                $item.find('[type=telephone]').text(result[i].telephone);
                $item.find('[name=addid]').attr('value',result[i].id);
                $item.find('[name=addresschoose').attr('value',result[i].id);
                $("#addresslist").append($item);
            }
        }
    })
    //加载新增地址组件
    $("#addresslist").on('click','.default-btn.m-0',function(){
        const id=$(this).siblings('[name=addid]').attr('value');
        const $btn = $(this);
        console.log(id);
        $.ajax({
            url:'/address/delete',
            data:{id},
            context:$btn,
            success:function(){
                // $(this).closest('[type=additem]').remove();
                console.log($(this).closest('[type=additem]'));
                layui.use('layer', function(){
                    var layer = layui.layer;
                    layer.msg('删除成功', { icon: 1, time: 1200 });
                });
            }
        })
    })
    //获取商品id,数量
    const productid=/*[[${productid}]]*/;
    console.log(productid);
    const number=/*[[${number}]]*/;
    console.log(number);
    const proidArr=productid.split(",");
    const numberArr=number.split(",");
    //过滤
    if(proidArr.length!=numberArr.length||proidArr.length==0||numberArr.length==0){
        layer.msg("系统异常,请重新选购",{icon: 3})
        setTimeout(function(){
            location.href="page/cart";
        },3000);
    }
    //加载商品
    for(let i=0;i<proidArr.length;i++){
        let proid=proidArr[i];
        let num=numberArr[i];
        $.ajax({
            url:'/product/select',
            data:{id:proid},
            success:function(result){
                let item = $("#cartitem").text();
                const $item =$(item);
                $item.find('[type=productimg]').attr('src','/'+result.defaultimg);
                console.log(result.id);
                $item.find('.input-counter').attr('type',result.id);
                $item.find('[type=productname]').text(result.name);
                $item.find('[type=productprice]').text(result.price);
                $item.find('#productnumber').attr('value',num);
                $item.find('[type=singlesumprice]').text(num*result.price);
                $("#productlist").append($item);
                updateTotalSum();
            }
        })
    }

    //计算总价
    function updateTotalSum() {
        let sum = 0;
        $('[type=singleproduct]').each(function(){
            const $row = $(this).closest('tr');
            const price = parseFloat($row.find('[type="productprice"]').text());
            const quantity = parseInt($row.find('#productnumber').val());
            sum += price * quantity;
        });
        $("[type=sum]").text(sum);
    }

    //确认购买按钮事件
    $("[type=checkoutcart]").on('click',function(){
        console.log("下单按钮被点击了");
        const $selectedRadio=$('input[name="addresschoose"]:checked');
        let id=[];
        let number=[];
        let addressid=$selectedRadio.val();
        console.log(addressid);
        if ($selectedRadio.length === 0) {
            layui.layer.msg('请选择收货地址', { icon: 2, time: 1200 });
            return;
        }
        $('[type=singleproduct]').each(function(){
            id.push($(this).find(".input-counter").attr('type'));
            number.push($(this).find('#productnumber').attr('value'));
        })
        $.ajax({
            url:'/order/add',
            data:{id:id,number:number,addressid:addressid,userid:userID},
            success:function(result){
                console.log(result);
                let code=result.code;
                let data=result.data;
                let msg=result.msg;
                if(code==200){
                    location.href="/page/payment?id="+data;
                }else{
                    layer.msg("订单创建失败",{icon:2});
                }
            }
        })
    })

    //增加减少按钮的事件
    $(document).on('click','.minus-btn',function(){
        const $row = $(this).closest('tr');
        const $numberInput = $row.find('#productnumber');
        const newNumber = parseInt($numberInput.val()) - 1;
        console.log(newNumber);
        const $sumprice=$("[type=sum]");
        if(newNumber>0){
            $numberInput.val(newNumber);  // 更新数量显示
            const price = parseFloat($row.find('[type="productprice"]').text());
            $row.find('[type="singlesumprice"]').text(price * newNumber);  // 更新单品总价
            updateTotalSum();
        }else{
            layer.msg("亲,不能再减少了",{icon:1,time:1200});
        }
    })

    $(document).on('click','.plus-btn',function(){
        const $row = $(this).closest('tr');
        const $numberInput = $row.find('#productnumber');
        const newNumber = parseInt($numberInput.val()) + 1;
        console.log(newNumber);
        const $sumprice=$("[type=sum]");
        $numberInput.val(newNumber);  // 更新数量显示
        const price = parseFloat($row.find('[type="productprice"]').text());
        $row.find('[type="singlesumprice"]').text(price * newNumber);  // 更新单品总价
        updateTotalSum();
    })
</script>
<script>
    $.ajax({
        url: '/category/getchildren',
        data: {id: -1},
        success: function (result) {
            for (let i = 0; i < result.length; i++) {
                let item = $("#categoryitem").text();
                const $item = $(item);
                $item.find("a").text(result[i].name);
                $item.find("a").attr('href','/page/categoryproducts?pid='+result[i].id);
                $("#categorylist").append($item);
            }
        }
    });
</script>
</body>
</html>